<template>
	<!-- 切换状态 -->
	<view class="list-box pad-left-right-30">
		<scroll-view scroll-y class="scroll-y">
			<view class="centerY" v-for="item in couponList" :key="item.id" @click="hanldeChange(item)">
				<view class="circle-border">
					<up-icon v-if="item.isShow" size="40rpx" color="#0055FE" name="checkmark-circle-fill"></up-icon>
				</view>
				<view class="list betweenX centerY color-white pad-30 mar-bottom-30 mar-left-20">
					<view class="centerX columnY left">
						<view class="font-40" v-if="item.discount_method == 1">全免</view>
						<view class="font-40" v-if="item.discount_method == 2">{{item.discount_num * 10}}折</view>
						<view class="font-40" v-if="item.discount_method == 3">￥{{item.discount_num}}</view>
						<view class="font-26">满{{item.price_condition}}可用</view>
					</view>
					<view class="betweenX centerY flex-w mar-left-30">
						<view>
							<view class="font-30">{{item.name}}</view>
							<view class="font-26 opacity">{{timeFormat(item.valid_end_at, 'yyyy年mm月dd日')}} 前有效
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<u-empty v-if="couponList.length == 0" marginTop="100" width="75" height="75" text="暂无优惠券"
			icon="/static/image/coupon-none.png"></u-empty>
		<view class="betweenX button-bottom centerXY">
			<view @click="hanldeCancel" class="btn">取消</view>
			<view @click="hanldeConfirm" class="btn mar-left-20 button-style">确定</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		defineEmits,
		defineProps
	} from 'vue';
	import {
		timeFormat
	} from '@/node_modules/uview-plus';
	import {
		getUserCouponAll
	} from '@/api/index.js';


	// 接收参数
	const props = defineProps({
		userCouponId: {
			type: [Number, String],
			default: 0
		}
	})

	const emits = defineEmits(['hanldeCancel', 'hanldeConfirm']);

	// 取消
	const hanldeCancel = () => {
		emits('hanldeCancel')
	}

	const hanldeConfirm = () => {
		emits('hanldeConfirm', couponInfo.value)
	}

	// 获取优惠券列表
	const couponList = ref([]);

	const hanldeUserCouponAll = (status) => {
		couponList.value = [];
		getUserCouponAll({
			use_status: status
		}).then(res => {
			if(res.code == 200){
				couponList.value = res?.data?.lists.map(item => {
					item.isShow = false;
					if (item.id == props.userCouponId) {
						item.isShow = true;
					}
					return item
				});
			}
		})
	}

	const couponId = ref(0);
	const couponInfo = ref({});
	const hanldeChange = (item) => {
		if (item.isShow) {
			couponList.value.forEach(item => {
				item.isShow = false;
				couponInfo.value = {};
			});
		} else {
			couponList.value.forEach(item => {
				item.isShow = false;
			});
			item.isShow = !item.isShow;
			couponInfo.value = item;
		}

	}

	onMounted(() => {
		hanldeUserCouponAll(1);
	})
</script>

<style scoped lang="scss">
	.circle-border {
		width: 44rpx;
		height: 44rpx;
		border: 2rpx solid #C3C3C3;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.list-box {
		height: 70vh;
		overflow-y: scroll;
	}

	.scroll-y {
		height: calc(70vh - 180rpx);
	}

	.list {
		width: 620rpx;
		height: 180rpx;
		background: url('https://file.xyljz.cn/upload/2024/11/27/17327160243973541.png') no-repeat;
		background-size: 100% 100%;
	}

	.list2 {
		width: 610rpx;
		height: 180rpx;
		background: url('https://file.yuanzhujiazheng.cn/upload/2024/09/30/b1426d71c5b131687376ff3b58b678e6.png') no-repeat center/cover;
		background-size: cover;
	}

	.opacity {
		opacity: .7;
	}

	.btn {
		width: 140rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 50rpx;
		color: #FE5113;
		font-size: 26rpx;
	}


	.button-style {
		background: #FE5113;
		color: #FFFFFF;
		border: 1rpx solid #FE5113;
	}

	.left {
		width: 160rpx;
	}

	.invalid {
		width: 139rpx;
		height: 86rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 2;
		left: 0rpx;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 100rpx;
		text-align: center;
	}
</style>